<template>
 <div class="detail-content">
   <Form :page="page" :formProps="formProps" @saveData="saveData" :saveBtn="'保存并继续添加'">
      <template #config>
        <el-button v-if="dynamicValidateForm.domains.length === 0" @click="addDomain" :icon="Plus" size="large" type="warning">添加口味</el-button>
        <div class="config-container" v-else>
          <el-alert :closable="false" title="口味名（3个字内）口味标签（输入标签回车添加）" type="success" />
          <el-form
              ref="formRef"
              :model="dynamicValidateForm"
              class="demo-dynamic"
          >
            <el-form-item
                v-for="(domain, index) in dynamicValidateForm.domains"
                :key="index"
                class="form-item"
            >
              <el-popover  trigger="click"  placement="bottom" :width="150">
                <template #reference>
                  <el-input v-model="domain.value" style="width: 150px" size="large" placeholder="输入口味" />
                </template>
                <ul class="option-ul">
                  <li v-for="(item,index1) in defaultTaste" @click="selectTaste(item,index1,index)" :key="index1">{{ item.label }}</li>
                </ul>
              </el-popover>
              <div class="tag-content">
                <el-tag
                    type="warning"
                    v-for="tag in domain.tags"
                    :key="tag"
                    closable
                    :disable-transitions="false"
                    @close="handleClose(tag,index)"
                >
                  {{ tag }}
                </el-tag>
                <el-input
                    v-if="domain.inputVisible"
                    ref="InputRef"
                    v-model="tagValue"
                    size="small"
                    style="width: 15%"
                    @keyup.enter="handleInputConfirm(index)"
                    @blur="handleInputConfirm(index)"
                />
                <el-button v-else class="button-new-tag ml-1" size="small" @click="showInput(index)">
                  + 自定义口味
                </el-button>
              </div>
              <el-link :underline="false" @click.stop="removeDomain(domain)" type="danger">删除</el-link>
            </el-form-item>
            <el-form-item class="add-btn">
              <el-button @click="addDomain" :icon="Plus" size="large" type="warning">添加口味</el-button>
            </el-form-item>
          </el-form>
        </div>
      </template>
     <template #image>
       <upload-file @getImage="getImage" :page="page" :viewImage="viewImage" />
     </template>
   </Form>
 </div>
</template>

<script setup>
import { useRouter } from 'vue-router';
import {
  computed, nextTick, reactive, ref,
} from 'vue';
import { Plus } from '@element-plus/icons-vue';
import Form from '../../components/form.vue';
import { useDishsData } from './useDishsData';
import uploadFile from '../../components/uploadFile.vue';

const router = useRouter();
const page = computed(() => router.currentRoute.value.query?.page);
const imageUrl = ref(null);
function getImage(image) {
  imageUrl.value = image;
}
const {
  formProps, saveData, viewImage, dynamicValidateForm,
} = useDishsData(imageUrl);
const removeDomain = (item) => {
  const index = dynamicValidateForm.domains.indexOf(item);
  if (index !== -1) {
    dynamicValidateForm.domains.splice(index, 1);
  }
};
const addDomain = () => {
  dynamicValidateForm.domains.push({
    key: Date.now(),
    value: '',
    tags: [],
    inputVisible: false,
  });
};
const defaultTaste = ref([
  {
    label: '甜味',
    value: 1,
  },
  {
    label: '温度',
    value: 2,
  },
  {
    label: '忌口',
    value: 3,
  },
  {
    label: '辣度',
    value: 4,
  },
]);
const tagValue = ref(null);
const handleInputConfirm = (index) => {
  if (tagValue.value) {
    dynamicValidateForm.domains[index].tags.push(tagValue.value);
  }
  dynamicValidateForm.domains[index].inputVisible = false;
  tagValue.value = '';
};
const InputRef = ref(null);
const showInput = (index) => {
  dynamicValidateForm.domains[index].inputVisible = true;
  nextTick(() => {
    InputRef.value.focus();
  });
};
const handleClose = (tag, index) => {
  dynamicValidateForm.domains[index].tags.splice(dynamicValidateForm.domains[index].tags.indexOf(tag), 1);
};
const tasteMap = new Map([
  [0, ['无糖', '少糖', '半糖', '多糖', '全糖']],
  [1, ['热饮', '常温', '去冰', '少冰', '多冰']],
  [2, ['不要葱', '不要算', '不要香菜', '不要辣']],
  [3, ['不辣', '微辣', '中辣', '重辣']],
]);
function selectTaste(item, index1, index) {
  dynamicValidateForm.domains[index].value = item.label;
  dynamicValidateForm.domains[index].tags = tasteMap.get(index1);
}
</script>

<style scoped lang="css">
.detail-content {
  padding: 30px;
  background-color: var(--el-bg-color);
}
.config-container {
  height: auto;
  padding: 20px;
  width: 60%;
  background-color: var(--el-color-primary-light-9);
}
.form-item > :deep(.el-form-item__content) {
  display: flex;
  justify-content: space-between;
}
.form-item  {
  margin: 10px;
}
:deep(.el-alert) {
  margin-bottom: 20px;
}
.add-btn {
  margin-top: 10px;
}
.option-ul {
  list-style-type: none;
}
.option-ul > li {
  padding: 8px;
  cursor: pointer;
}
.tag-content {
  width: 68%;
  height: auto;
  background-color: var(--el-bg-color);
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  padding: 5px;
  align-items: center;
}
.tag-content > :deep(.el-tag) {
  margin: 5px;
}
</style>
